<template>
    <div>
        <form action="/">
  <van-search  
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
    @keyup.enter="onSearch"
  >
  <template #label>
       <van-icon name="arrow-left" @click="$router.go(-1)" />
  </template>
  <template #action>
    <div @click="onSearch" v-if="value">搜索</div>
    <div @click="$router.go(-1)" v-if="!value">取消</div>
  </template>
  </van-search>
</form>
<h5 v-if='show'>搜索历史 <van-icon name="delete-o" @click="all"/></h5>
<van-empty
   v-if='show2'
  v-show="list.length==0"
  class="custom-image"
  :image="require('../../assets/empty.0d284c2e.png')"  description="描述文字"
/>
   <dl v-if="list.length!=0">
            <dd v-for="ite in list" :key="ite.id"  @click="$router.push('/courceDetail?id='+ite.id)">
                <p style="fontSize:0.5rem;margin:0rem">{{ite.title}}</p>
                <p style="fontSize:0.3rem;color: #000;margin:0.15rem 0rem">
                    <van-icon name="clock-o" />
                    <span>{{new Date(ite.end_play_date).toLocaleString()}}</span>
                    共{{ite.sales_num}}课时</p>
                    <div>
                  <img :src="ite.teachers_list[0].teacher_avatar" alt="">
              <p>{{ite.teachers_list[0].teacher_name}}</p>   
                </div>     
               <p class="ite-bot"> 
                  <span style="fontSize:0.3rem;color: #777;">{{ite.brows_num}}人已报名</span> 
                   <span style="fontSize:0.45rem;color:#44a426;" v-if="ite.price">
                       {{ite.price}}</span> 
                       <span style="fontSize:0.45rem;color:#44a426;">
                       免费</span>
               </p>
            </dd>
        </dl>

<div class="aa" v-if="show1">
  <div class="text" v-if='show'>
    <van-button type="default" style="margin:.2rem" v-for="(item,index) in $store.state.searchList" :key="index" @click="onSearch(item.title,'btn')">{{item.title}}</van-button>
</div>
</div>
    </div>
</template>

<script>
import {courseLists} from "../../Request/http.js";
export default {
  name: "EverydaySearch",

  data() {
    return {
      value: "",
      list:[],
      show:true,
      show1:2,
      show2:false
    };
  },

  mounted() {},
  watch:{
    value:{
      handler(val){
        if(val==''){
          this.show2=true
        }else{
          this.show2=false
          this.show=false
        }
      }
    },deep:true,immediate:true
  },
  methods: {
    all(){
      this.$store.commit('all')
    },
    onSearch(val,btn) {
        // this.$store.state.searchList=Array.from(new Set(this.$store.state.searchList))
       
       if(btn=='btn'){
             courseLists({keywords:val}).then(res=>{
        this.list=res.list
        this.show1=false
        if(this.list.length!=0){
          this.show=true
           this.show2=true
        }else{
          this.show=false
          this.show2=false
        }
        console.log(this.list);
      })
       }else{
          var index = this.$store.state.searchList.findIndex(item => {
          return (item.title == this.value);
        });
        console.log(index);
       if(index!=-1){
         this.$store.commit('detail',index)
       }
       this.$store.commit("add", { title: this.value });
       console.log(val,btn);
             courseLists({keywords:this.value}).then(res=>{
        this.list=res.list
       
      })
       }
     
      if (this.$store.state.searchList.length > 6) {
        this.$store.commit("pop");
      } 
      this.value=''
    },
    onCancel() {
      this.$toast("取消");
    }
  }
};
</script>

<style lang="scss" scoped>
dl {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  dd {
    margin: 0rem;
    padding: 0.5rem;
    position: relative;
    color: #323233;
    font-size: 0.373rem;
    line-height: 0.64rem;
    background-color: #fff;
    border-bottom: 0.373rem solid rgb(242, 243, 245);
    div {
      height: 1rem;
      line-height: 1rem;
      display: flex;
      img {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
      }
      p {
        margin-top: 0rem;
      }
    }
    .ite-bot {
      margin: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}
</style>